<template>
  <div class="watch-history">
    <div class="history-header">
      <h2>观看记录</h2>
      <div class="history-actions">
        <el-button type="danger" plain @click="clearAllHistory">清空全部</el-button>
      </div>
    </div>

    <el-table
        :data="historyList"
        style="width: 100%"
        empty-text="暂无观看记录"
    >
      <el-table-column prop="animeTitle" label="番剧名称" width="180">
        <template #default="{row}">
          <router-link :to="`/anime/${row.animeId}`" class="anime-link">
            {{ row.animeTitle }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="episodeTitle" label="集数" width="120">
        <template #default="{row}">
          第{{ row.episodeNumber }}集 {{ row.episodeTitle }}
        </template>
      </el-table-column>
      <el-table-column prop="watchTime" label="观看时间" width="180">
        <template #default="{row}">
          {{ formatTime(row.watchTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="观看进度" width="120">
        <template #default="{row}">
          <el-progress :percentage="row.progress" :show-text="false" />
          {{ row.progress }}%
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button link type="primary" @click="continueWatch(row)">继续观看</el-button>
          <el-button link type="danger" @click="deleteHistory(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        layout="prev, pager, next, jumper"
        @current-change="fetchHistory"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { userInform } from '@/stores/userInform'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

const userStore = userInform()

const historyList = ref([])
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const fetchHistory = () => {

}

const continueWatch = (item) => {
  // 跳转到继续观看的逻辑
  console.log('继续观看:', item)
}

const deleteHistory = (id) => {
  ElMessageBox.confirm('确定删除这条记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {}).catch((
      //
  ) => {})
}

const clearAllHistory = () => {
  ElMessageBox.confirm('确定清空所有观看记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清空观看记录的逻辑
  }).catch(() => {})
}

onMounted(() => {
  fetchHistory()
})
</script>

<style scoped>
.watch-history {
  padding: 20px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.anime-link:hover {
  text-decoration: underline;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>
